html css [코코아톡 클론] 3.3~3.5 필기 참고 : 브라우저가 CSS를 읽을 때 위에서부터 순서대로 읽는다. 만약 같은 selector를 가리키는 css가 여러개면 가장 마지막 스타일이 적용된다. -> 즉, 코드의 순서가 결과에 영향을 미침 👉결과 저 빨간 네모가 하나처럼 보이지만 아니야! 네모가 3개 붙어있는거임 span은 옆에 다른 요소가 올 수 있는데 box는 올 수 없는모습 block : 옆에 다른 요소가 못 오는거 inlin... kokoa clonhtml csshtml css [HTML/CSS] Flex / flex-direction, justify-content, align-items flex, flexbox 레이아웃을 사용하기 위해선 아래와 같은 CSS 속성을 적용해야합니다. flex 레이아웃에서 메인 축(Main Axis)는 가로축이 되고 수직축 또는 교차축(Cross Axis)는 메인 축에 수직 이 됩니다. 축의 방향을 결정하기 위해 속성을 이용합니다. (default: row) justify-content는 메인축 방향으로 아이템들을 정렬하는 속성입니다. flex-... html csshtml css 3/2(화) FrontEnd/HTML5(2) [alt = "이미지 설명 구문" width = "가로길이(px/%) height = "세로길이(px/%)"] *src 속성과 alt 속성 - 사진의 경로가 잘못되거나 이미지를 제대로 표현할 수 없는 경우 대체 텍스트 용도 *width 속성과 height 속성 (1) input 태그 : 사용자에게 값을 입력 받을 수 있는 텍스트 상자 또는 체크박스/ 라디오 버튼 등등을 만들 수 있음 : fo... html csshtml css [코코아톡 클론] 2.4~2.11 필기 href는 a에서만 사용 가능 h1같은곳에선 불가능 이게 불가능하다는 소리 " target_blank " 이거는 저 링크를 눌렀을때 현재 페이지가 구글페이지로 넘어가는게 아니라 새 창이 뜨면서 거기에 구글 페이지가 나옴 얘는 다른것들이랑 다르게 /로 닫아주는 태그가 없음 이게 아니란말임 . 이유는 lf-closing tage이기때문 (자체 닫기 태그) 이렇게 하면 이미지가 뜸 아니면 " " ... kokoa clonhtml csshtml css 3/5(금)FrontEnd/CSS(2) : 글꼴을 지정할 때 사용 선택자 { font-family : 글꼴명; } (2) 외부 웹 폰트 사용법 : 웹 폰트 제공 사이트 : : 글꼴의 크기를 변경할 때 사용 선택자 { font-size : 크기 { (px | em | %) ;} : 글꼴의 굵기를 변경할 때 사용 선택자 { font-weight: normal(기본값) | bold | bolder | lighter | 100 | 400... html csshtml css 2/26(금) FrontEnd/HTML5(1) <예시> <properties> </properties> <entry> </entry> : 표 : 웹 문서에서 자료를 정리할 때 주로 사용 행과 열로 이루어져있음 행과 열이 만나는 지점을 셀이라고 함 표를 구성하는 태그 : ```... html csshtml css HTML_Basic : Hyper Text Markup Language의 약자 웹페이지를 작성하기 위한 구조를 잡기 위한 언어 즉, 웹 컨텐츠의 의미와 구조를 정의 마크다운 언어는 들어봤어도 마크업? 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어 프로그래밍 언어와는 다르게 단순하게 데이터를 표현하기만 함 html <html lang="en"> : HTML문서의 최상위 요소, 문서의 root : <he... html csshtml css [코코아톡 클론] 3.6~3.11 필기 inline : 높이와 너비가 없음 그래서 위,아래에 margin을 가질 수 X padding : 사방에 다 가질 수 있음 => 위,아래에 margin주고 싶으면 저번시간에 배운 inline->block 변환 사용 여러 요소들이 같이 쓸 수 있음 한 번에 여러 class가 쓰일 수 있음 id는 한번에 여러 개를 가질 수 없어 한 요소는 하나의 id만 가질 수 있음 왜냐면 inline은 너비랑... kokoa clonhtml csshtml css HTML head 구조 시작과 끝을 상징하는 < html > 태그 사이에는 < head >, < body > 태그를 삽입하여 이 두 태그는 쌍을 이룬다. 이번에는 head의 구조에 어떤한 태그들이 정의되어 있는지 알아보도록 하자. meta HTML 문서에서 일반적인 정보를 선언할때 meta 태그를 활용한다. utf - 8 은 가변 길이 유니코드(전 세계의 모든 문자를 다루도록 설계된 표준 문자 전산 처리 방식) 인... html csshtml css REACT_심화_review_1편 PostList 컴포넌트 생성 -> app.js에서 react-route-dom 설치하고, 라우터 돔 잡아주기 (라우팅, 즉 페이지 이동하는거 잡아주는 작업) -> 페이지를 세분화 시킨다 (헤더, 게시글 파트로 나눔) -> 해당 페이지들을 불러다가 사용할 수 있게 했는데, 그냥 불러다 쓴게 아니라 Post에다가는 PostList에서 데이터를 넘겨주어야 하고, 데이터 없을 때 오류가 난다거나 ... 정규식ReactjsTILredux인증middlewarehtml cssPermit.jshistoryPermit.js 코코아챌린지 코딩숙제 요구 사항 : 레이블을 사용하십시오. ID를 사용하십시오. 모든 필드는 필수입니다. 비밀번호는 10 자 이상이어야합니다. 결과 내 답 html css 정답 html css 내 답 html css 정답 html css 내 답 html css 정답 html css 내 답 html css 내 답으로 코딩했을때 결과물 정답 html css 정답으로 코딩했을때의 결과 내 답 html css color... kokoa clonhtml csshtml css [HTML/CSS] 이미지 크기와 위치 조절 방법 3가지 < img > 태그 + object-fit < img > 요소에 top과 left, translate 등의 속성으로 이미지의 위치를 조절할 수 있다. < img > 태그를 < div class='container' > 태그로 감싼다. < div class='container' > 태그 와 < img > 태그에 CSS 속성을 추가한다. < div class='container' > CSS 속성... html cssImgar 프로젝트Imgar 프로젝트
[코코아톡 클론] 3.3~3.5 필기 참고 : 브라우저가 CSS를 읽을 때 위에서부터 순서대로 읽는다. 만약 같은 selector를 가리키는 css가 여러개면 가장 마지막 스타일이 적용된다. -> 즉, 코드의 순서가 결과에 영향을 미침 👉결과 저 빨간 네모가 하나처럼 보이지만 아니야! 네모가 3개 붙어있는거임 span은 옆에 다른 요소가 올 수 있는데 box는 올 수 없는모습 block : 옆에 다른 요소가 못 오는거 inlin... kokoa clonhtml csshtml css [HTML/CSS] Flex / flex-direction, justify-content, align-items flex, flexbox 레이아웃을 사용하기 위해선 아래와 같은 CSS 속성을 적용해야합니다. flex 레이아웃에서 메인 축(Main Axis)는 가로축이 되고 수직축 또는 교차축(Cross Axis)는 메인 축에 수직 이 됩니다. 축의 방향을 결정하기 위해 속성을 이용합니다. (default: row) justify-content는 메인축 방향으로 아이템들을 정렬하는 속성입니다. flex-... html csshtml css 3/2(화) FrontEnd/HTML5(2) [alt = "이미지 설명 구문" width = "가로길이(px/%) height = "세로길이(px/%)"] *src 속성과 alt 속성 - 사진의 경로가 잘못되거나 이미지를 제대로 표현할 수 없는 경우 대체 텍스트 용도 *width 속성과 height 속성 (1) input 태그 : 사용자에게 값을 입력 받을 수 있는 텍스트 상자 또는 체크박스/ 라디오 버튼 등등을 만들 수 있음 : fo... html csshtml css [코코아톡 클론] 2.4~2.11 필기 href는 a에서만 사용 가능 h1같은곳에선 불가능 이게 불가능하다는 소리 " target_blank " 이거는 저 링크를 눌렀을때 현재 페이지가 구글페이지로 넘어가는게 아니라 새 창이 뜨면서 거기에 구글 페이지가 나옴 얘는 다른것들이랑 다르게 /로 닫아주는 태그가 없음 이게 아니란말임 . 이유는 lf-closing tage이기때문 (자체 닫기 태그) 이렇게 하면 이미지가 뜸 아니면 " " ... kokoa clonhtml csshtml css 3/5(금)FrontEnd/CSS(2) : 글꼴을 지정할 때 사용 선택자 { font-family : 글꼴명; } (2) 외부 웹 폰트 사용법 : 웹 폰트 제공 사이트 : : 글꼴의 크기를 변경할 때 사용 선택자 { font-size : 크기 { (px | em | %) ;} : 글꼴의 굵기를 변경할 때 사용 선택자 { font-weight: normal(기본값) | bold | bolder | lighter | 100 | 400... html csshtml css 2/26(금) FrontEnd/HTML5(1) <예시> <properties> </properties> <entry> </entry> : 표 : 웹 문서에서 자료를 정리할 때 주로 사용 행과 열로 이루어져있음 행과 열이 만나는 지점을 셀이라고 함 표를 구성하는 태그 : ```... html csshtml css HTML_Basic : Hyper Text Markup Language의 약자 웹페이지를 작성하기 위한 구조를 잡기 위한 언어 즉, 웹 컨텐츠의 의미와 구조를 정의 마크다운 언어는 들어봤어도 마크업? 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어 프로그래밍 언어와는 다르게 단순하게 데이터를 표현하기만 함 html <html lang="en"> : HTML문서의 최상위 요소, 문서의 root : <he... html csshtml css [코코아톡 클론] 3.6~3.11 필기 inline : 높이와 너비가 없음 그래서 위,아래에 margin을 가질 수 X padding : 사방에 다 가질 수 있음 => 위,아래에 margin주고 싶으면 저번시간에 배운 inline->block 변환 사용 여러 요소들이 같이 쓸 수 있음 한 번에 여러 class가 쓰일 수 있음 id는 한번에 여러 개를 가질 수 없어 한 요소는 하나의 id만 가질 수 있음 왜냐면 inline은 너비랑... kokoa clonhtml csshtml css HTML head 구조 시작과 끝을 상징하는 < html > 태그 사이에는 < head >, < body > 태그를 삽입하여 이 두 태그는 쌍을 이룬다. 이번에는 head의 구조에 어떤한 태그들이 정의되어 있는지 알아보도록 하자. meta HTML 문서에서 일반적인 정보를 선언할때 meta 태그를 활용한다. utf - 8 은 가변 길이 유니코드(전 세계의 모든 문자를 다루도록 설계된 표준 문자 전산 처리 방식) 인... html csshtml css REACT_심화_review_1편 PostList 컴포넌트 생성 -> app.js에서 react-route-dom 설치하고, 라우터 돔 잡아주기 (라우팅, 즉 페이지 이동하는거 잡아주는 작업) -> 페이지를 세분화 시킨다 (헤더, 게시글 파트로 나눔) -> 해당 페이지들을 불러다가 사용할 수 있게 했는데, 그냥 불러다 쓴게 아니라 Post에다가는 PostList에서 데이터를 넘겨주어야 하고, 데이터 없을 때 오류가 난다거나 ... 정규식ReactjsTILredux인증middlewarehtml cssPermit.jshistoryPermit.js 코코아챌린지 코딩숙제 요구 사항 : 레이블을 사용하십시오. ID를 사용하십시오. 모든 필드는 필수입니다. 비밀번호는 10 자 이상이어야합니다. 결과 내 답 html css 정답 html css 내 답 html css 정답 html css 내 답 html css 정답 html css 내 답 html css 내 답으로 코딩했을때 결과물 정답 html css 정답으로 코딩했을때의 결과 내 답 html css color... kokoa clonhtml csshtml css [HTML/CSS] 이미지 크기와 위치 조절 방법 3가지 < img > 태그 + object-fit < img > 요소에 top과 left, translate 등의 속성으로 이미지의 위치를 조절할 수 있다. < img > 태그를 < div class='container' > 태그로 감싼다. < div class='container' > 태그 와 < img > 태그에 CSS 속성을 추가한다. < div class='container' > CSS 속성... html cssImgar 프로젝트Imgar 프로젝트